<!-- 流程 -->
<template>
  <view>
    <!-- 导航栏 -->
    <aster-back font-color="#333" :show-title="true" :title="title" />
    <!-- 内容 -->
    <view>
      <van-form ref="formRef" autocomplete="off">
        <van-tabs v-model:active="activeTab">
          <van-tab title="发起提交" name="form" key="form">
            <form-render
              ref="formRenderRef"
              v-model:formData="formData"
              :formItems="formDesign?.formItems"
              :formConfig="formDesign?.formConfig"
            />
          </van-tab>
          <van-tab title="查看流程" name="process" key="process"> 2 </van-tab>
        </van-tabs>
      </van-form>
    </view>
    <!-- 底部操作按钮 -->
    <aster-tabbar
      :customStyle="{
        borderTopLeftRadius: '10px',
        borderTopRightRadius: '10px',
      }"
    >
      <van-button type="primary" block @click="handleSubmit">提交</van-button>
    </aster-tabbar>
  </view>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterTabbar from '@/components/common/aster-tabbar.vue';
  import FormRender from '../form/form-render.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getUserDepts } from '@/services/api/user';
  import { useAuthStore } from '@/store/modules/auth';
  import { isEmpty, isNotEmpty } from '@/utils/is';
  import { Toast } from '@/utils/uniapi/prompt';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getFormData, getFormDesign } from '@/services/api/form';
  import { FormDataModel, FormModel } from '@/services/model/formModel';

  const authStore = useAuthStore();
  const formRef = ref();
  const formRenderRef = ref();

  /** 导航栏标题 */
  const title = ref('');
  /** 表单id */
  const code = ref('');
  /** 流程实例id */
  const instanceId = ref('');
  /** 标签 */
  const activeTab = ref(0);
  /** 部门id */
  const deptId = ref('');
  /** 表单设计信息 */
  const formDesign = ref<FormModel>();
  /** 表单数据 */
  const formData = reactive<FormDataModel>({});
  /** 显示表单 */
  const showFormRender = ref(false);

  /**
   * 加载数据
   */
  const loadData = async () => {
    // 加载部门
    await loadUserDepts();
    // 加载表单设计信息
    await loadFormDesign();
  };

  /**
   * 加载表单信息
   */
  const loadFormDesign = async () => {
    await getFormDesign(code.value).then(async ({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        formDesign.value = data.data;
        // 加载表单数据
        await loadFormData();
      } else {
        Toast(data.msg);
      }
    });
  };

  /**
   * 加载表单数据
   */
  const loadFormData = async () => {
    if (isNotEmpty(instanceId.value)) {
      await getFormData(instanceId.value).then(({ data }) => {
        if (data.code == ResultEnum.SUCCESS) {
          Object.keys(data.data).forEach((key) => {
            formData[key] = data.data[key];
          });
        } else {
          Toast(data.msg);
        }
      });
    }
    showFormRender.value = true;
  };

  /**
   * 加载登录用户所属部门
   */
  const loadUserDepts = async () => {
    const userId = authStore.getUserInfo?.id;
    if (isEmpty(userId)) {
      Toast('登录已失效，请重新登录！');
      router.pushTab(config.route.home);
    } else {
      await getUserDepts(userId).then(({ data }) => {
        if (data.code == ResultEnum.SUCCESS) {
          deptId.value = data.data[0].id ? data.data[0].id : '';
        } else {
          Toast(data.msg);
        }
      });
    }
  };

  /**
   * 提交
   */
  const handleSubmit = () => {
    console.log('submit--->');
    console.log('formData--->', formData);
    formRef.value.validate().then(() => {
      console.log('true');
    });
  };

  onLoad((options: any) => {
    title.value = options?.title;
    code.value = options?.code;
    instanceId.value = options?.instanceId;
    // 加载数据
    loadData();
  });
</script>
<style scoped lang="scss"></style>
